{% extends "venclave/base.html" %}

{% block styles %}
  {{ block.super }}
  <link rel="stylesheet" type="text/css" href="{% url venclave-styles "home.css" %}"/>
{% endblock %}

{% block header %}
  <img src="{% url venclave-images "venclave_welcome.png" %}" alt="Video Enclave" />
{% endblock header %}

{% block content %}
  <table class="home-content"
    style="width:
    {% if settings.VENCLAVE_ALLOW_REGISTRATION %}700px{% else %}350px{% endif %}">
    <tr>
      <td>
        <img src="{% url venclave-images "welcome_back.png" %}" alt="welcome back"/>
        <form name="login" action="{% url venclave-home %}" method="POST">
          <p>
            <label for="login_username">username:</label>
            <input type="text" maxlength="30" name="username" id="login_username"/>
          </p>
          <p>
            <label for="login_password">password:</label> <input type="password" id="login_password" name="password"/>
            <input type="hidden" name="f" value="l" />
          </p>
          <input type="image" src="{% url venclave-images "sign_in.png" %}"/>
        </form>
      </td>
      {% if settings.VENCLAVE_ALLOW_REGISTRATION %}
        <td>
          <img src="{% url venclave-images "new_account.png" %}" alt="create an account"/>
          <form name="register" action="{% url venclave-home %}" method="POST">
            {% for field in reg_form %}
              <p class="fieldWrapper">
                {{ field.errors }}
                {{ field.label_tag }}: {{ field }}
              </p>
            {% endfor %}
            <input type="hidden" name="f" value="r" />
            <input type="image" src="{% url venclave-images "register.png" %}"/>
          </form>
        </td>
      {% endif %}
    </tr>
  </table>
{% endblock content %}
